<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../image/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            width: 100%;
            height: 60px;
        }

        header img {
            width: 120px;
            height: 30px;
            float: left;
            margin: 15px 100px 0 100px;
        }

        header li {
            float: left;
            list-style: none;
            line-height: 60px;
            margin-right: 80px;
            cursor: pointer;
            color: #7B7B7B;
        }

        header button {
            float: right;
            width: 60px;
            height: 40px;
            border: 1px solid #3D7EF1;
            margin-top: 10px;
            cursor: pointer;
        }

        .login {
            background-color: white;
            margin-right: 15px;
            color: #3D7EF1;
        }

        .register {
            background-color: blue;
            margin-right: 100px;
            color: #fff;
        }

        article {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: #F2F4F8;
        }

        .overlay {
            width: 1200px;
            height: 190px;
            background-image: url(../image/jobdetailbrief.png);
            position: absolute;
            top: 50px;
            left: 50%;
            margin-left: -600px;
        }

        .text1 {
            width: 100%;
            height: 95px;
            margin-left: 70px;
        }

        .post {
            font-size: 25px;
            font-weight: bold;
            margin-right: 10px;
            line-height: 95px;
        }

        .salary {
            color: red;
            line-height: 95px;
        }

        .text1 div {
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            float: right;
            margin-top: 40px;
            border: 1px solid #6297F4;
            cursor: pointer;
        }

        .collection {
            margin-right: 380px;
        }

        .upload {
            margin-right: -208px;
        }

        .send {
            margin-right: -330px;
            color: #fff;
            background-color: #1162EE;
        }

        .text2 {
            width: 430px;
            text-align: center;

        }

        .text2 span {
            color: #68696C;
            margin-right: 5px;
        }

        .text3 div[class^=box] {
            width: 70px;
            height: 40px;
            color: #BBA79F;
            background-color: #EDEDED;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            float: left;
            margin-top: 10px;
            margin-right: 10px;
            font-size: 14px;
        }

        .text3 .box1 {
            margin-left: 70px;
        }

        .context {
            width: 1200px;
            height: 730px;
            margin-top: 70px;
            margin-left: 160px;
            
        }

        .left {
            width: 800px;
            height: 730px;
            background-color: #fff;
            position: relative;
            float: left;
        }

        .infombox,.phonebox{
            width: 100%;
            height: 100px;
        }

        .infom{
            width: 100px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-left: 5px solid #1162EE;
            margin-left: 40px;
            position: absolute;
            top: 40px;
            font-size: 20px;
            font-weight: bold;
        }
        h3{
            font-weight: normal;
            margin-bottom: 20px;
            margin-left: 50px;
        }
        .left li{
            list-style: none;
            margin-left: 50px;
        }
        .context1{
            height: 300px;
        }
        .context2{
            height: 230px;
        }
        .phone{
            width: 100px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-left: 5px solid #1162EE;
            margin-left: 40px;
            font-size: 20px;
            font-weight: bold;
        }
        .address{
            margin-top: 20px;
            margin-left: 65px;
        }
        .right{
            width: 380px;
            height: 300px;
            float: left;
            background-color: #fff;
            margin-left: 20px;
        }
        .infombox1{
            width: 100%;
            height: 100px;
        }

        .infom1{
            width: 100px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-left: 5px solid #1162EE;
            margin-left: 40px;
            position: absolute;
            margin-top: 30px;
            font-size: 20px;
            font-weight: bold;
        }
        .goklogo{
            width: 100%;
            height: 100px;
        }
        .goklogo1{
            vertical-align: middle;
            margin-left: 50px;
        }
        .IT{
            width: 100%;
            height: 40px;
        }
        .IT1,.home1{
            vertical-align: baseline;
            margin-left: 50px;
            margin-right: 5px;
        }
        footer{
            width: 100%;
            height: 150px;
            background-color: #282828;
        }
        .nav{
            width: 1200px;
            height: 100px;
        }
        .nav li{
            list-style: none;
            float: left;
            color: #fff;
            font-size: 10px;
            margin-top: 50px;
            margin-left: 30px;
        }
        .nav .first{
            margin-left: 170px;
        }

        .nav img{
            float: right;
            margin-top: 40px;
        }
        .bottom{
            color: #fff;
            font-size: 10px;
            margin: 20px 0 0 170px;
        }
        .back{
            width: 1519px;
            height: 190px;
        }
    </style>
</head>

<body>
    <header>
        <img src="../image/gokjob_logo.png" alt="">
        <ul>
            <li>首页</li>
            <li>应聘求职</li>
            <li>在线学习</li>
            <li>集客项目</li>
        </ul>
        <button class="register">注册</button>
        <button class="login">登录</button>
    </header>
    <article>
        <div class="back">
            <img class="back" src="../image/jobdetailbj.png" alt="">
        </div>
        <div class="overlay">
            <div class="text1">
                <span class="post">前端开发工程师</span>
                <span class="salary">6k-12k/月</span>
                <div class="collection">
                    <img src="../image/Fill.png" alt=""> 收藏
                </div>
                <div class="upload">
                    <img src="../image/upload-blue.png" alt=""> 上传简历
                </div>
                <div class="send">
                    投递简历
                </div>
            </div>
            <div class="text2">
                <span>1-3年</span>
                <span>|</span>
                <span>全职</span>
                <span>|</span>
                <span>3人</span>
                <span>|</span>
                <span>男女不限</span>
                <span>|</span>
                <span>大专</span>
            </div>
            <div class="text3">
                <div class="box1">五险一金</div>
                <div class="box2">加班补助</div>
                <div class="box3">带薪年假</div>
            </div>

        </div>
        <div class="context">
            <div class="left">
                <div class="infombox">
                    <div class="infom">职位信息</div>
                </div>
                <div class="context1">
                    <h3>岗位要求：</h3>
                <li>1、精通javascript/css/html开发，对常用前端框架有应用经验(如jQuery,Bootstrap,Angularjs，Vue.JS、小程序等)﹔</li>
                <li>2、对css/JavaScript性能优化、解决多浏览器兼容性问题、及响应式开发有处理经验;</li>
                <li>3、对用户体验、交互操作流程、及用户需求有处理经验;</li>
                <li>4、有开发HTML5前端的经验，熟悉应用最新的HTML5新的标准，能应用HTML5开发web App界面和体验效果的应用;</li>
                <li>5、具有微信生态环境H5移动应用开发经验;</li>
                <li>6、踏实可靠，对工作有强烈的责任心，沟通能力良好;</li>
                <li>7、有线上实际项目案例、或掌握VUE前端技术者优先</li>
                </div>
                <div class="context2">
                    <h3>岗位职责:</h3>
                    <li>1、有微信小程序开发经验者优先考滤;</li>
                    <li>2、专科学历1年以上相关工作经验。</li>
                    <li>3、熟练掌握vue，熟练掌握JavaScript，熟悉HTML5/XML/Css3前端开发技术，精通DIV CSS布局，熟悉JQ、JQ mobile等前端框架;</li>
                    <li>4、对浏览器兼容性、代码可维护性、前端性能优化等有深入研究;</li>
                    <li>5、为人诚实正直，做事认真负责，具有良好的沟通和团队协作能力;</li>
                </div>
                <div class="phonebox">
                    <div class="phone">联系我们</div>
                    <div class="address">工作地点：
                    <span><strong>福建省/厦门市/集美区</strong></span>
                </div>
                </div>
                
            </div>
            <div class="right">
                <div class="infombox1">
                    <div class="infom1">职位信息</div>
                </div>
                <div class="goklogo">
                    <img class="goklogo1" src="../image/gok_logo.png" alt="">福建国科信息科技有限公司
                </div>
                <div class="IT">
                    <img  class="IT1" src="../image/sort.png" alt="">IT/互联网
                </div>
                <div class="home">
                    <img class="home1" src="../image/home.png" alt="">www.goktech.cn/about/goktech
                </div>
            </div>
        </div>

    </article>
    <footer>
        <div class="nav">
            <li class="first">首页</li>
            <li>关于我们</li>
            <li>了解国科就业</li>
            <li>国科学院</li>
            <li>集客服务</li>
            <li>意见反馈</li>
            <img src="../image/foot_logo.png" alt="">
        </div>
        <div class="bottom">©2018 job.goktech.cn 闽ICP备15016628号-1        </div>
    </footer>
</body>

</html>